<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课程列表</title>
		<meta name="Description" content="课程列表"/>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<script src="../../static/js/jquery-1.11.1.min.js"></script>
		  <script src="../../static/js/common.js" charset="utf-8"></script>

		<style type="text/css">
			.layui-form-switch {
				width: 55px;
			}			
			.layui-form-switch em {
				width: 40px;
			}
			body{overflow-y: scroll;}
		</style>
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">课程管理</a>
        <a>
          <cite>课程列表</cite></a>
      </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
		</div>
		<div class="weadmin-body">
			<div class="layui-row" id="search">
				<form class="layui-form layui-col-md12 we-search">
					课程搜索:
					<div class="layui-inline">
						<input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
				</form>
			</div>
			<div class="weadmin-block demoTable">
				<button class="layui-btn" onclick="WeAdminShow('添加课程','./add.html',600,400)"><i class="layui-icon">&#xe61f;</i>添加课程</button>
			</div>
			<table class="layui-hide" id="courseList" lay-filter="coursebar"></table>

			<script type="text/html" id="courseOpBar">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>

			<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		</div>
		<div id="editForm" style="display: none;">
			<form class="layui-form">
				<div class="layui-form-item">
					<label for="L_courseName" class="layui-form-label">
						<span class="we-red">*</span>课程名称
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_courseName" name="username" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_courseHour" class="layui-form-label">
						<span class="we-red">*</span>课程学时
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_courseHour" name="courseHour" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_courseScore" class="layui-form-label">
						<span class="we-red">*</span>课程学分
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_courseScore" name="courseScore" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item" pane>
					<label  class="layui-form-label">
						<span for="L_startTerm" class="we-red">*</span>开课学期
					</label>
					<div class="layui-input-inline">
						<select id="L_startTerm" name="startTerm" lay-verify="required" >
							<option value="1">1</option>
							<option value="2">2</option>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_chooseNumber" class="layui-form-label">
						<span class="we-red">*</span>选课人数
					</label>
					<div class="layui-input-inline">
						<input type="text" id="L_chooseNumber" name="chooseNumber" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
			</form>
		</div>
		<script>
            layui.extend({
                admin: '{/}../../static/js/admin'
            });

            layui.use(['table', 'jquery','form', 'admin'], function() {
                var table = layui.table,
                    $ = layui.jquery,
                    form = layui.form,
                    admin = layui.admin;
                $.ajax({
                    url: remoteUrl+"course",
                    type: "GET",
                    contentType: "application/json;charset=utf-8",
                    success: function (json) {
                        if (json.result == "") {
                            json.result = {};
                        } else {
                            table.render({
                                elem: '#courseList',
                                cellMinWidth: 80,
                                cols: [
                                    [{
                                        field: 'id',title: '课程编号',sort: true
                                    }, {
                                        field: 'courseName',title: '课程名称',sort: true
                                    }, {
                                        field: 'courseHour',title: '学时'
                                    },{
                                        field: 'courseScore',title: '学分'
                                    },{
                                        field: 'startTerm',title: '开始学期'
                                    },{
                                        field: 'chooseNumber',title: '规定人数'
                                    },{
                                        field: 'operate',title: '操作',align:'center',toolbar: '#courseOpBar',unresize: true
                                    }]
                                ],
                                data: json.result,
                                event: true,
                                page: true
                            });

                            //监听工具条
                            table.on('tool(coursebar)', function(obj){
                                var data = obj.data;
                                if(obj.event === 'detail'){

                                    layer.msg('ID：'+ data.id + ' 的查看操作');

                                } else if(obj.event === 'del'){
                                    layer.confirm('真的删除行么', function(index){
                                        $.ajax({
                                            url: remoteUrl+"course/"+data.id,
                                            type: "DELETE",
                                            contentType: "application/json;charset=utf-8",
                                            success: function (json) {
                                                obj.del();
                                                layer.close(index);
                                                layer.alert("删除成功")
                                            }
                                        });



                                    });
                                } else if(obj.event === 'edit'){
                                    layer.open({
                                        type: 1,
                                        fix: false, //不固定
                                        maxmin: true,
                                        shadeClose: true,
                                        area: [600 + 'px', 500 + 'px'],
                                        shade: 0.4,
                                        title: "编辑",
                                        content: $('#editForm'),
                                        success: function () {
                                            $("#L_courseName").val(data.courseName);
                                            $("#L_courseHour").val(data.courseHour);
                                            $("#L_courseScore").val(data.courseScore);
                                            $("#L_startTerm").val(data.startTerm);
                                            $("#L_chooseNumber").val(data.chooseNumber);
										}})
                                }
                            });
                        }
                    }
                });
				/*
				 *数据表格中form表单元素是动态插入,所以需要更新渲染下
				 * http://www.layui.com/doc/modules/form.html#render
				 * */
                $(function(){
                    form.render();
                });
            });
		</script>
	</body>

</html>